<head><meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1">
<meta charset=utf-8>
<style>
body { margin: 0px; }
canvas { width:100%; height:100%; overflow: hidden; }
</style>
<script type="text/javascript" src="../h3du_min.js"></script>
<script type="text/javascript" src="demoutil.js"></script>
<script type="text/javascript" src="../extras/meshjson.js"></script>
<script type="text/javascript" src="../extras/polyhedra.js"></script>
</head>
<body>
<canvas width="600" height="450" id=canvas></canvas>
<script id="demo">
/* global H3DU, Polyhedra */
// <!--
/*
 Any copyright to this file is released to the Public Domain.
 http://creativecommons.org/publicdomain/zero/1.0/
 If you like this, you should donate
 to Peter O. (original author of
 the Public Domain HTML 3D Library) at:
 http://peteroupc.github.io/
*/

// Class that positions an HTML text element
function Label(text, pos) {
  "use strict";
  this.label = document.createElement("div");
  this.label.innerHTML = text;
  this.label.style.width = "150px";
  this.label.style.textAlign = "center";
  this.label.style.display = "none";
  this.label.style.position = "absolute";
  this.label.style.overflow = "hidden";
  document.body.appendChild(this.label);
  this.pos = pos;
  this.update = function(matrix, width, height) {
    var pos = H3DU.Math.vec3toWindowPoint(this.pos, matrix, [0, 0, width, height]);
    if(pos[2] < -1 || pos[2] > 1) {
      // Too close, too far, or behind the camera
      this.label.style.display = "none";
    } else {
      this.label.style.display = "block";
      this.label.style.left = pos[0] - 75 + "px";
      this.label.style.top = pos[1] + "px";
    }
  };
}

function Labels(scene, batch) {
  "use strict";
  this.labels = [];
  this.batch = batch;
  this.scene = scene;
  this.add = function(text, pos) {
    this.labels.push(new Label(text, pos));
  };
  this.update = function() {
    if(this.labels.length === 0)return;
    var proj = this.batch.getProjectionMatrix();
    var view = this.batch.getViewMatrix();
    var width = this.scene.getWidth();
    var height = this.scene.getHeight();
    proj = H3DU.Math.mat4multiply(proj, view);
    for(var i = 0; i < this.labels.length; i++) {
      this.labels[i].update(proj, width, height);
    }
  };
}

  // Create the 3D scene; find the HTML canvas and pass it
  // to Scene3D.
var scene = new H3DU.Scene3D(document.getElementById("canvas"))
   .cullFace(H3DU.Scene3D.BACK)
   .setClearColor("white");
var sub = new H3DU.Batch3D()
   .orthoAspect(-20, 20, -10, 10, -20, 20);
sub.getLights().setBasic();
var shapeGroup = new H3DU.ShapeGroup();
sub.addShape(shapeGroup);
var labels = new Labels(scene, sub);
var mesh;
mesh = H3DU.Polyhedra.hexahedron(4.5, 0);
var shape = new H3DU.Shape(mesh).setColor("red").setPosition(-15, 5, 0);
shapeGroup.addShape(shape);
labels.add("Cube", [-15, 5, 0]);
mesh = H3DU.Polyhedra.octahedron(4.5, 0);
shapeGroup.addShape(
    new H3DU.Shape(mesh).setColor("blue").setPosition(-5, 5, 0));
labels.add("Octahedron", [-5, 5, 0]);
mesh = H3DU.Polyhedra.icosahedron(4.5, 0);
shapeGroup.addShape(
    new H3DU.Shape(mesh).setColor("lime").setPosition(5, 5, 0));
labels.add("Icosahedron", [5, 5, 0]);
mesh = H3DU.Polyhedra.tetrahedron(4.5, 0);
shapeGroup.addShape(
    new H3DU.Shape(mesh).setColor("darkorange").setPosition(15, 5, 0));
labels.add("Tetrahedron", [15, 5, 0]);
mesh = H3DU.Polyhedra.dodecahedron(4.5, 0);
shapeGroup.addShape(
    new H3DU.Shape(mesh).setColor("yellow").setPosition(-15, -5, 0));
labels.add("Dodecahedron", [-15, -5, 0]);
var rotation = [0, 0, 0];
var timer = {};
H3DU.renderLoop(function(time) {
  "use strict";
  for(var i = 0; i < shapeGroup.shapeCount(); i++) {
    shapeGroup.getShape(i).setQuaternion(
      H3DU.Math.quatFromTaitBryan(rotation));
  }
  rotation[0] = 360 * H3DU.getTimePosition(timer, time, 6000);
  rotation[1] = 360 * H3DU.getTimePosition(timer, time, 12000);
  labels.update();
  scene.render(sub);
});
// -->
</script>
</body>
